<%@ page pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

	<link href="${pageContext.request.contextPath}/css1/registercss/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css1/registercss/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css1/registercss/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css1/registercss/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css1/Huploadify-master/Huploadify.css" rel="stylesheet">
</head>
<body>
   <div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h3 style="color: red">欢迎进入注册页</h3>
            </div>
            <div class="ibox-content">
                <form method="post" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">角色</label>
                        <div class="col-sm-10">
                        <select class="form-control m-b" name="role">
                            <c:forEach var="role" items="${listAll}">
                            <c:if test='${role.title=="storehouse"}'>
                            	<option value="${role.title}">${role.title_zh}</option>
                            </c:if>	
                            </c:forEach>
                        </select>
                        </div>
                    </div>
                     <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name">
                        </div>
                    </div>
                     <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">头像</label>
                        <div class="col-sm-10">
                           <!-- <input type="text" name="head"/>	 -->		<!-- (回填表单,用于提交表单的图片数据库存储) -->
							<div  class="imageUpload"></div>				<!-- (上传控件) -->
							<!-- <div  class="preview"></div> -->					<!-- (预览图) -->
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="pwd">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="email">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="telephone">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                                <label class="col-sm-2 control-label">生日</label>
                                <div class="col-sm-4">
                                    <div class="input-group date">
  										<span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" name="brithday">
									</div>
                                </div>
                            </div>
                     <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="line-height">性别</label>
                        <div class="col-sm-10" style="margin-top:6px">
                            <input type="radio" name="gender" value="男"/>男
   							<input type="radio" name="gender" value="女"/>女
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="address">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">问题</label>
                        <div class="col-sm-10">              
				  			<select name="question1" class="form-control">
				  			<option value="">--请选择--</option>
				   			<option value="你父母的结婚纪念日">你父母的结婚纪念日</option>
							<option value="你的生日">你的生日</option>
							<option value="你的爱好">你的爱好</option>
							<option value="你喜欢的人">你喜欢的人</option>
							<option value="你母亲的生日">你母亲的生日</option>
							<option value="你爱看的书">你爱看的书</option>
							</select>
                        </div>
                    </div>
                      <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">请输入答案</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="answer1">
                        </div>
                    </div>
                         <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">问题</label>
                        <div class="col-sm-10">              
				  			<select name="question2" class="form-control">
				  			<option value="">--请选择--</option>
				   		<option value="你父母的结婚纪念日">你父母的结婚纪念日</option>
							<option value="你的生日">你的生日</option>
							<option value="你的爱好">你的爱好</option>
							<option value="你喜欢的人">你喜欢的人</option>
							<option value="你母亲的生日">你母亲的生日</option>
							<option value="你爱看的书">你爱看的书</option>
							</select>
                        </div>
                    </div>
                      <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">请输入答案</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="answer2">
                        </div>
                    </div>
                    
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10" >
                           <textarea rows="10" cols="50" name="remark">
							我是一个文本框。
							</textarea>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            <div class="btn btn-primary" type="submit" onclick="submitForm()">提交注册信息</div>
                            <button class="btn btn-white" type="submit">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    <!-- 全局js -->
    <script src="${pageContext.request.contextPath}/js1/registerjs/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js1/registerjs/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js1/registerjs/jquery.metisMenu.js"></script>
    <script src="${pageContext.request.contextPath}/js1/registerjs/jquery.slimscroll.min.js"></script>
  

    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath}/js1/registerjs/hplus.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js1/registerjs/contabs.js"></script>

    <!-- 第三方插件 -->
    <script src="${pageContext.request.contextPath}/js1/registerjs/pace.min.js"></script>
    
      <script src="${pageContext.request.contextPath}/js1/registerjs/layer-v3.1.1/layer/layer.js"></script>
      
        <script src="${pageContext.request.contextPath}/js1/registerjs/bootstrap-datepicker.js" ></script>
        
        <script src="${pageContext.request.contextPath}/js1/Huploadify-master/jquery.Huploadify.js"></script>
</body>

  
  <script>
	$('.input-group.date').datepicker({
		format: "yyyy-mm-dd",
	    weekStart: 1,
	    maxViewMode: 0,
	    language: "zh-CN",
	    forceParse: false,
	    autoclose: true,
	    todayHighlight: true,
	    orientation: "bottom auto"
	});
	
	//点击提交按钮：
	function submitForm(){
		var data = $('form').serialize();
		$.get('${pageContext.request.contextPath}/User_TbServlet/add',data,function(data){
			if(data){
				layer.msg('添加成功');
				location.href="${pageContext.request.contextPath}/login.jsp";
			}else{
				layer.msg('添加失败');
			}
			
		})
		
	} 
	
	
	$('.imageUpload').each(function(){
		var aa = function(obj){
			obj.Huploadify({
				auto:true,
				fileTypeExts:'*.jpg;*.png;',
				multi:true,
				//formData:{name:'image0'},
				fileSizeLimit:9999,
				showUploadedPercent:true,//是否实时显示上传的百分比，如20%
				showUploadedSize:true,
				removeTimeout:9999999,
				uploader:'${pageContext.request.contextPath}/UploadServlet',
				onUploadComplete:function(file,data,response){
					 //获得回填数据
					data_json=JSON.parse(data);
					src = "${pageContext.request.contextPath}"+data_json.path;
					//此处obj为上传控件  ,代表每个imageUpload
					//回填表单
					obj.prev().val(data_json.path); 
					obj.before('<input type="text" name="head" value="'+data_json.path+'"/>');
					//填充预览图
					obj.after('<div class="preview"><img src="'+src+'" style="height:50px"/></div>');
					setTimeout(function(){
						obj.find('.uploadify-queue-item').html('');
					},1000);
				}
			});
		}
		aa($(this));
	});
	  
</script>
</html>